<template>
    <div class="register auth">
        <div class="content">
            <h2>注册</h2>
            <!-- 用户名输入框 -->
            <el-input v-model="user.name" placeholder="请输入用户名" clearable class="user-input" />
            <!-- 邮箱输入框 -->
            <el-input v-model="user.email" placeholder="请输入邮箱" clearable class="user-input" />
            <!-- 密码输入框，带显示密码功能 -->
            <el-input v-model="user.password" placeholder="请输入密码" clearable show-password class="user-input" />
            <!-- 注册按钮 -->
            <el-button class="user-input" @click="register">注册</el-button>
        </div>
    </div>
</template>

<script setup>
// 引入样式
import '@/assets/auth.css'
// 引入 Element Plus 组件
import { ElInput, ElButton, ElMessage } from 'element-plus'
// 引入 Vue 的响应式和路由
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 绑定输入框的数据
let user = ref({
    name: '',      // 用户名
    email: '',     // 邮箱
    password: ''   // 密码
})

// 点击注册按钮的方法
function register() {
    // 这里可以添加注册校验和注册逻辑
    // ElMessage.error('Oops, this is a error message.') // 注册失败的提示
    // ElMessage({ message: 'Congrats, this is a success message.', type: 'success' }) // 注册成功的提示
    // 注册成功后跳转到登录页
    router.push({
        path: '/login'
    })
}
</script>